<!-- 我的积分 -->
<template>
  <div class="integral">
    <div class="wai">
      <div class="yau"></div>
      <div class="int-img">
        <i class="iconfont icon-jifen"></i>
      </div>
    </div>
    <div class="jifen">
      <p class="jifen-p1">积分余额</p>
      <p class="jifen-p2">{{integras}}</p>
    </div>
    <div class="mout">
      <p v-for="(item,index) in items" :key="index">{{item.title}}</p>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      integras: "0",
      items: [{ title: "转赠" }, { title: "积分商城" }, { title: "明细" }]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.wai {
  width: 100%;
  height: 250rpx;
  background-color: #ff634e;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yau {
  width: 100%;
  height: 120rpx;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background-color: #ffffff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.int-img {
  width: 150rpx;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 3px 3px #ffaba0;
  z-index: 1000;
}
.int-img > i {
  display: inline-block;
  font-size: 50px;
  color: #ff634e;
}
.jifen-p1 {
  font-size: 34rpx;
  text-align: center;
}
.jifen-p2 {
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
}
.mout {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}
.mout > p {
  width: 170rpx;
  height: 70rpx;
  border: 1rpx solid #dddddd;
  color: #c3c3c3;
  font-size: 32rpx;
  border-radius: 30rpx;
  text-align: center;
  line-height: 70rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}
</style>